<template>
  <div style="height: 100%;width: 100%;overflow-x: auto;overflow-y: auto">
      <div class="bend_top box">
        <div class="bend_head">输入参数</div>
        <a-row type="flex"   class="bend_top_all">
          <a-col :span="12">
                <div class="bend_top_all1" >

                  <div class="tend">
                    <a-upload
                        name="file"
                        :showUploadList="false"
                        :maxCount="1"
                        :customRequest="customRequest"
                        style="float:right;"
                    >
                      <button  class="daoru" style="width: 120%;float: right;height: 22px"> 导入载荷谱 </button>
                    </a-upload>
                  </div>
                  <div class="tend">
                    <span class="text">注：上传文件格式为.xls或.xlsx格式，其各列参数如表格所示(无需表头)</span>
                  </div>
                  <div class="tend">
                    <input class="bend_input" value="1">
                    <span class="text">接触长寿命系数</span>
                  </div>
                  <div class="tend">
                    <input class="bend_input"  v-model="form.Ynt_Longlife">
                    <span class="text" >弯曲长寿命系数</span>
                  </div>
                  <div class="tend">
                    <select  class="bend_input" v-model="form.material_type">
                      <option class="u365_input_option" value="1">渗碳淬火</option>
                      <option class="u365_input_option" value="2">调质</option>
                      <option class="u365_input_option" value="3">渗氮钢</option>
                      <option class="u365_input_option" value="4">结构钢</option>
                      <option class="u365_input_option" value="5">感应淬火和火焰淬火钢</option>
                      <option class="u365_input_option" value="6">氮碳共渗钢</option>
                    </select>
                    <span class="text">材料类型</span>
                  </div>
                  <div class="tend" >
                    <select  class="bend_input"  v-model="form.consider_Nc">
                      <option class="u365_input_option" value="1">是</option>
                      <option class="u365_input_option" value="2">否</option>
                    </select>
                    <span class="text">转折点循环次数设计</span>
                  </div>
                  <div class="tend">
                    <select  class="bend_input"  v-model="form.consider_Long">
                      <option class="u365_input_option" value="1">是</option>
                      <option class="u365_input_option" value="2">否</option>
                    </select>
                    <span class="text">无限点循环次数设计</span>
                  </div>
                  <div class="tend">
                    <select  class="bend_input" v-model="form.whether_single_rotation">
                      <option class="u375_input_option" value="1">单向运转</option>
                      <option class="u375_input_option" value="2">双向运转</option>
                    </select>
                    <span class="text">运行工况</span>
                  </div>
                  <div class="tend">
                    <select  class="bend_input">
                      <option class="u365_input_option" value="是">是</option>
                      <option class="u365_input_option" value="否">否</option>
                    </select>
                    <span class="text">允许点蚀</span>
                  </div>
                </div>
          </a-col>
          <a-col :span="12" style="height: 100%">
            <div style="width: 100%;height: 100%" >
              <div class="img-content" style="overflow: scroll;height: 100%">
                <table style="width: 90%;height: 80%;border: 1px solid silver;margin: auto;margin-top: 5%;" >
                  <tr>
                    <td>扭矩(kNm)</td>
                    <td>循环次数</td>
                  </tr>
                  <tr style="text-align: center" v-for="(item,i) in table" :key="i">
                    <td>{{item[0]}}</td>
                    <td>{{item[1]}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <button class="compute"  @click="submit1">计算</button>
      <div class="bend_end box">
        <div class="bend_head">输出参数</div>
        <div class="sout">
          <div class="sout_top">
            <span class="sout_top_first">齿轮弯曲当量载荷(Nmm)
            <span >{{res.torque_bending_design_fatigue}}</span>
            </span>
            <span style="margin-left: 1.2%;" >
               <span v-html="'齿轮接触当量载荷(Nmm)&nbsp'"></span>
               <span>{{res.torque_contact_design_fatigue}}</span>
             </span>

          </div>
          <div class="sout_end">
             <span class="sout_top_first" >
               <span v-html="'齿轮接触当量循环次数&nbsp;'"></span>
               <span>{{res.number_contact_design_fatigue}}</span>
             </span>
            <span class="sout_top_second" >
               <span v-html="'齿轮弯曲当量循环次数&nbsp;&nbsp;'"></span>
               <span>{{res.number_bending_design_fatigue}}</span>
             </span>
          </div>

        </div>
      </div>


  </div>
</template>

<script>
import {filetext, firedelete, nameloadspectrum_bending} from '@/api/file'
export default {
name: "nameloadspectrum_bending",
  created () {
    document.title = '齿轮载荷持续谱分析' //模块中文名
    this.$store.state.file.key = 3 //设置key为自己的页面编号
  },
  mounted(){
    //绑定页面退出事件
    window.onbeforeunload= (e)=>{
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      this.delete()//调用自己的方法
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
  },
  data(){
  return{
    form2:{
      uuids:[]
    },
    table:[[1,2],[0,1]],
    form:this.$store.state.file.dataList[3],
    output:[],
    res:{
      torque_bending_design_fatigue:'Static Text',//  ‘齿轮弯曲当量载荷 (Nmm)’
number_bending_design_fatigue:'Static Text',// ‘齿轮弯曲当量循环次数’
torque_contact_design_fatigue :'Static Text',//‘齿轮接触当量载荷 (Nmm)’
number_contact_design_fatigue :'Static Text',//‘齿轮接触当量循环次数’
    }
  }
  },
  methods: {
    //同步请求删除载荷谱数组的方法
    async delete(){
      this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
      await firedelete(this.form2).then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
        console.log(res);
      })
    },
    customRequest(data){
      console.log(data)
      const formData = new FormData()
      formData.append( 'fileName' , data.file)
      console.log(formData)
      filetext(formData)
          .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的 this 就不是外面那个 this
            console.log(res)
            this.form.uuid=res.data.uuid;
            this.table=res.data.filedata;
            this.form2.uuids.push(res.data.uuid);
          })
          .catch(error => {
            console.log(error)
          });
    },
    submit1() {
      if (this.form.uuid == "")
        this.$message.warning("请先导入载荷谱")
      else {
        nameloadspectrum_bending(this.form)
            .then(res => {
              this.output = res;
              this.replace();
            })
            .catch(error => {
              console.log(error);
            });
      }
    },
    replace() {
          this.res.torque_bending_design_fatigue = this.output[0],
          this.res.number_bending_design_fatigue = this.output[1],
          this.res.torque_contact_design_fatigue = this.output[2],
          this.res.number_contact_design_fatigue = this.output[3]
    }
  }

}
</script>

<style scoped>
.table1
{
  height: 90%;
  width: 87%;
  overflow: scroll;
}
.table1 th
{
  width: 10%;
}
.table1,th,tr,td
{
  border: 1px solid grey;
}
.box{
  margin: 20px 2%;
  background: #FFFFFF;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.bend_top{
  height: 60%;
}
.bend_head{
  width: 100%;
  /*height: 31px;*/
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
}
.bend_end{
  height: 20%;
}
.compute{
  border-radius: 4px;
  border: 2px #686868;
  background: #6DD400;
  width: 104px;
  height: 29px;
  font-size: 18px;
  /*color: #FFFFFF;*/
  letter-spacing: 0;
  text-align: center;
  margin-left: 90%;
}
.bend_top_all1{
  height: 100%;
  margin-right: 10%;
}
.bend_top_all{
  margin: 24px;
  height: 80%;
}
.daoru{
  background-color: #D7D7D7;
   border-radius: 4px;
  border: 2px #686868;

  width: 25%;
  height: 90%;
  line-height: 90%;
  float: right;
}
.bend_input{
  float: right;
  height: 58%;
  width: 19%;
  text-align: center;
}
.tend{
  height: 10%;
  width: 100%;
}
.text{
  float: right;
  margin-right: 22px;
  display: block;
  letter-spacing: 0;
  text-align: center;
}

.img-content{
  display: inline-block;
  width: 75%;
  height: 75%;
  margin: 1% 2% 3% 10%;
  margin-bottom: 0;
  border: 1px rgba(0,0,0,.3) solid;
}

.img-content tr:first-child td{
  height: 20%;
  border: 1px solid rgba(0,0,0,.5);
  vertical-align:middle;
  text-align: center;
}
.img-content td{
  height: 20%;
  border: 1px solid silver;
  vertical-align:middle;
  text-align: center;
}
.img-content tr:nth-child(2n+1){
  background-color: rgb(239,239,239);
}
.sout{
  padding-top: 1.5%;
  padding-bottom: 2%;
  width: 100%;
  height: 100%;
}
.sout_top{
  width: 100%;
  height: 50%;
}
.sout_end{
  width: 100%;
  height: 50%;
}
.sout_top_first{
  margin-left: 25%;
  margin-right: 25%;
}
.sout_top_second{
  margin-left: 1.4%;
}
</style>
